<template>
  <div>
    <note-templates :data="stringData" :list="directory">
      <template #note>
        <div id="note-item1">
          <title-card title="1.先卸载本机安装的node环境" />
        </div>
        <div id="note-item2">
          <title-card title="2.下载nvm" />
          <p>
            <b>下载地址1 </b>
            <a
              target="_blank"
              href="https://github.com/coreybutler/nvm-windows/releases"
              >nvm-wondows</a
            >
          </p>
          <p>
            <b>下载地址2 </b>
            <a target="_blank" href="https://nvm.uihtm.com/"
              >nvm文档手册 - nvm是一个nodejs的版本管理工具</a
            >
          </p>
          <p>nvm-setup.zip：安装版，推荐使用</p>
        </div>
        <div id="note-item3">
          <title-card title="3.安装nvm" />
          <p>非c盘(推荐) 位置 安装</p>
          <p>→ set node.js symlink 注意 这是nvm控制node版本 放node的文件夹，</p>
          <p>
            一般 可直接安装在 c:\Program Files\nodejs， 也可以 提前创建
            nvm文件夹及 nodejs文件夹
            然后在安装的时候直接安装在已有的nvm文件夹内，然后 设置set node.js
            symlink 时候就可以选择 F:\nvm\nodejs 自己想要的 nodejs快捷访问位置；
          </p>
          <p>可在 nvm文件夹内 新建 nodejs文件夹</p>
          <p>可在 nvm文件夹内 新建 npm 文件夹</p>
        </div>
        <div id="note-item4">
          <title-card title="4.配置环境变量" />
          <p><b>window+r键 打开 输入 sysdm.cpl</b></p>
          <p><b>用户环境变量 系统变量 都设置:</b></p>
          <p>可在 nvm文件夹内 新建 nodejs文件夹</p>
          <p>可在 nvm文件夹内 新建 npm 文件夹</p>
          <p>
            变量名：NPM_HOME 变量地址（nvm控制的npm版本文件夹）：F:\nvm\npm
            （写自己的路径地址）
          </p>
          <p>
            变量名：NVM_HOME 变量地址（nvm文件夹）：F:\nvm （写自己的路径地址）
          </p>
          <p>
            变量名：NVM_SYMLINK
            变量地址（nvm控制的node版本文件夹）：F:\nvm\nodejs（写自己的路径地址）
          </p>
          <p><b>path 新增:</b></p>
          <ul>
            <li>⚪ %NPM_HOME%</li>
            <li>⚪ %NVM_HOME%</li>
            <li>⚪ %NVM_SYMLINK%</li>
          </ul>
        </div>
        <div id="note-item5">
          <title-card title="5.nvm 控制node版本" />
          <pre-code :code="code1" language="bash" />
          <p>这里举例 安装node版本</p>
          <pre-code :code="code2" language="bash" />
          <p>安装node版本后</p>
          <pre-code :code="code3" language="bash" />
        </div>
      </template>
    </note-templates>
  </div>
</template>

<script setup name="NVM">
import NoteTemplates from '@/components/NoteTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, reactive, ref, toRefs } from 'vue';

const code1 = `常用命令：
nvm ls 查看已经安装的所有nodejs版本
nvm install 版本号，可安装指定版本的nodejs
nvm use 版本号，即可切换到指定版本
nvm uninstall 版本号，卸载指定版本`;

const code2 = `nvm install 14.17.3

nvm use 14.17.3`;

const code3 = `nvm use 14.2.0

node -v 

npm -v`;

const stringData = reactive({});

const directory = ref([
  {
    name: '1.先卸载本机安装的node环境',
    id: 'note-item1',
  },{
    name: '2.下载nvm',
    id: 'note-item2',
  },{
    name: '3.安装nvm',
    id: 'note-item3',
  },{
    name: '4.配置环境变量',
    id: 'note-item4',
  },{
    name: '5.nvm 控制node版本',
    id: 'note-item5',
  },
]);

const getTitle = () => {
  postArticleDetail({
    route: 'NVM',
  }).then((res) => {
    stringData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>
